<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>大学生社团管理系统</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">大学生社团管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layuimini-select-bgcolor mobile layui-hide-xs">
                <a href="javascript:;" data-bgcolor="配色方案"><i class="fa fa-ellipsis-v"></i></a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img id="headUrl" class="layui-nav-img">
                    <i id="userName"></i>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="userInfo()">基本资料</a></dd>
                    <dd><a id="javascript:;" onclick="modifyHeadImg()">修改头像</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/logout">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="test" id="navTree">


            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!---->
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
            <!--style="height: 100%;"-->
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="welcome">首页</li>
            </ul>
            <div class="layui-tab-content">
                <!--"-->
                <div class="layui-tab-item layui-show">
                    <!--style="height: 500px;"-->
                    <iframe src="welcome.html" scrolling="no" style="height: 580px;width: 100%;"
                            frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        如遇技术问题，请及时联系管理员1040001060@qq.com
    </div>

    <div id="userInfo" style="display: none">
        <form class="layui-form layui-form-pane" id="userModify" lay-filter="userModify">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off" required placeholder="请输入姓名" lay-verify="required"
                           lay-reqtext="姓名必填" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="pass" lay-verify="pass" required placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux" id="tip1"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="repass" lay-verify="pass" required placeholder="请确认密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux" id="tip2"></div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="telephone"  lay-verify="required|phone" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="mmImgDiv" class="mmImgs" style="display: none">
    <div class="layui-upload" >
        <button type="button" class="layui-btn" id="headImg">选择头像自动上传</button>
        <div class="layui-upload-list" >
            <img class="layui-upload-img" width="200px" height="200px" id="demo1">
            <p id="demoText"></p>
        </div>
    </div>
</div>

</body>
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="lib/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'jquery','upload','layer'], function () {
        var element = layui.element;
        var $ = layui.jquery;
        var upload = layui.upload;
        var layer = layui.layer;
        //动态加载菜单
        $.ajax({
            type:'get',
            url:'/userAuthList',
            dataType:'json',
            success:function (res) {
                if (res.state == true) {
                    //开始加载菜单
                    var authList = res.data;
                    $("#navTree").html("");
                    // var strBuffer = [];
                    var option = "";
                    for (var i = 0;i< authList.length;i++){
                        option += "<li class='layui-nav-item'>";
                        for (var j = 0;j<authList[i].length;j++){
                            if (j == 0){
                                //加载父菜单
                                option += "<a href='javascript:;'>"+authList[i][j].authName+"</a><dl class='layui-nav-child'>";
                            }else {
                                option += "<dd><a data-url='"+authList[i][j].url+"' data-id='"+(authList[i][j].id)+"' data-title='"+authList[i][j].authName+"' " +
                                    "class='site-demo-active' href='javascript:;' data-type='tabAdd'>"+authList[i][j].authName+"</a></dd>";
                            }
                        }
                        option += "</dl></li>";
                    }
                    $("#navTree").html(option);

                    $("dd>a").click(function (e) {
                        e.preventDefault();
                        $("#mainIframe").attr("src", $(this).attr("href"));
                    });

                    //触发事件
                    var active = {
                        tabAdd: function (url, id, name) {
                            element.tabAdd('demo', {
                                title: name,
                                content: '<iframe data-frameid="' + id + '" scrolling="no" frameborder="0" src="' + url +
                                    '" style="width:100%;height: 560px;"></iframe>',
                                id: id
                            })

                            element.render('tab');

                        },
                        tabChange: function (id) {
                            //切换到指定Tab项
                            element.tabChange('demo', id);
                        },
                        tabDelete: function (id) {
                            element.tabDelete("demo", id);
                        },
                        tabDeleteAll: function (ids) {
                            $.each(ids, function (i, item) {
                                element.tabDelete("demo", item);
                            })
                        }
                    };

                    $('.site-demo-active').on('click', function () {
                        var dataid = $(this);
                        if ($(".layui-tab-title li[lay-id]").length <= 0) {
                            active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                        } else {
                            var isData = false;
                            $.each($(".layui-tab-title li[lay-id]"), function () {
                                if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                                    isData = true;
                                }
                            })
                            if (isData == false) {
                                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
                            }
                        }
                        active.tabChange(dataid.attr("data-id"));
                    });

                    element.init();
                }else {
                    layer.msg(res.msg,{icon:3})
                }
            }
        });

        //塞头像跟名字
        $("#headUrl").attr("src",""+localStorage.getItem("headImg"));
        $("#userName").text(localStorage.getItem("name"));


        //普通图片上传
        var uploadInst = upload.render({
            elem: '#headImg'
            ,url: '/imageUpload' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result);
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.state == false){
                    return layer.msg('上传失败',{icon:3});
                }
                //上传成功
                localStorage.setItem("headImg",res.data.relativePath);
                $("#headUrl").attr("src",res.data.relativePath);
                layer.msg('上传成功',{icon:1});
                layer.load(2);
                setTimeout('layer.closeAll()',1000);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });
    function userInfo() {
        //值回显
        $("input[name=name]").val(localStorage.getItem("name"));
        $("input[name=id]").val(localStorage.getItem("id"));
        console.log(localStorage.getItem("email").length)
        if (localStorage.getItem("email").length === 4){
            $("input[name=email]").val("");
        } else {
            $("input[name=email]").val(localStorage.getItem("email"));
        }
        if (localStorage.getItem("telephone").length === 4){
            $("input[name=telephone]").val("");
        } else {
            $("input[name=telephone]").val(localStorage.getItem("telephone"));
        }
        layer.open({
            type: 1,
            title:["修改个人资料", 'font-size:14px; font-weight: 700;'],
            btn:['确认修改','取消修改'],
            btnAlign: 'c',
            content: $('#userInfo'),
            area: ['400px','360px'],
            closeBtn:2,
            yes: function(index, layero){
                
                if ($("input[name=name]").val() == ""){
                    return layer.msg('名字不能为空')
                }
                if ($("input[name=pass]").val() == ""){
                    return layer.msg('密码不能为空')
                }
                if ($("input[name=pass]").val() != $("#repass").val()) {
                    return layer.msg('两次密码不一致！')
                }
                var comData = $("#userModify").serialize();
                $.ajax({
                    type:'post',
                    url:'/userBack',
                    data:comData,
                    dataType:'json',
                    success:function (res) {
                        if (res.state == true){
                            layer.msg('修改成功', {icon:1,time:1000},function(){
                                //关闭弹框
                                layer.load(2);
                                layer.close(index);
                                setTimeout('window.location.reload()',500);
                            });
                        }else {
                            layer.msg(res.msg, {icon:3,time:1000});
                        }
                    }
                });
            },
            btn2:function (index,layero) {
                //取消修改，关闭弹框
                layer.close(index);
            }
        });
    }
    function modifyHeadImg() {
        layer.open({
            type: 1,
            title:["修改头像", 'font-size:14px; font-weight: 700;'],
            content: $('#mmImgDiv'),
            area: ['230px','305px'],
            closeBtn:2,
            zIndex:1314
        });
    }

</script>


</html>
